<template>
  <div>
    <Row class="rowButton">
      <Upload
        multiple
        type="drag"
        :action="uploadUrl"
        :format="['zip']"
        :on-success="uploadSuccess"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>Click or drag files here to upload</p>
        </div>
      </Upload>
    </Row>
    <Row class="rowButton">
      <Tag v-for="(item,index) in files" :key="index" :name ="item.id" closable color="success" size="large" @on-close="deleteFile" :loading="fileLoading">{{ item.name }}</Tag>
    </Row>
    <Row :gutter="24" type="flex" justify="start" style="margin-bottom: 1rem" >
      <Col span="5">
        <Button type="primary" size="large" @click="doSave()" :loading="btnLodading">  <Icon type="md-save"></Icon>  保存 </Button>
      </Col>
      <Col span="5">
        <Button type="primary" size="large" @click="doAdd()" :loading="btnLodading"> <Icon type="md-add"></Icon> 添加  </Button>
      </Col>
      <Col span="5">
        <Button type="primary" size="large" @click="doDelete()" :loading="btnLodading"> <Icon type="md-remove"></Icon>刪除  </Button>
      </Col>

    </Row>
    <Row :gutter="24" type="flex" justify="start" style="margin-bottom: 1rem">
      <Col span="5">
        <!--<Table :columns="columns1" :data="data1"></Table>-->
        <Button type="primary" size="large" @click="updatePatch()" :loading="btnLodading">  <Icon type="md-save"></Icon> 更新补丁   </Button>
      </Col>
      <Col span="5">
        <!--<Table :columns="columns1" :data="data1"></Table>-->
        <Button type="success" size="large" @click="doStart()" :loading="btnLodading">   <Icon type="md-save"></Icon> 启动 </Button>
      </Col>
      <Col span="5">
        <Button type="error" size="large" @click="doStop()" :loading="btnLodading"> <Icon type="md-add"></Icon> 停止 </Button>
      </Col>
      <Col span="5">
        <Button type="primary" size="large" @click="search()" :loading="btnLodading">  <Icon type=""></Icon> 刷新</Button>
      </Col>
    </Row>
    <Row :gutter="24" type="flex" justify="start" style="margin-bottom: 1rem">
      <Col span="5">
        <!--<Table :columns="columns1" :data="data1"></Table>-->
        <Button type="primary" size="large" @click="queryStatus()" :loading="btnLodading">  <Icon type=""></Icon> 刷新状态   </Button>
      </Col>
      <Col span="5">
        <!--<Table :columns="columns1" :data="data1"></Table>-->
        <Button type="primary" size="large" @click="executeKill()" :loading="btnLodading">  <Icon type=""></Icon> 杀死  </Button>
      </Col>
    </Row>
    <Row class="rowButton" >
      <v-table
        column-width-drags
        style="width: 100%"
        :height=1000
        :is-horizontal-resize=true
        :columns="columns"
        :table-data="tableData"
        row-hover-color="#eee"
        row-click-color="#edf7ff"
        :select-all="selectALL"
        :select-change="selectChange"
        :is-loading="tableLoading"
        :cell-edit-done="cellEditDone"
      ></v-table>
      <Card shadow>
      </Card>
    </Row>
  </div>
</template>

<script>
import VTable from 'vue-easytable/libs/v-table/src/table'
import 'vue-easytable/libs/themes-base/index.css'
import { deployWindows } from '@/api/data'
import baseUrl from '@/libs/api.request'

export default {
  name: 'deployWindows',
  components: {
    VTable
  },
  data () {
    return {
      btnLodading: false,
      tableLoading: false,
      fileLoading: false,
      files: '',
      selectDatas: [],
      uploadUrl: baseUrl.baseUrl + '/deployWindows/uploadPatch',
      tableData: [],
      columns: [
        { width: 60, titleAlign: 'center', columnAlign: 'center', type: 'selection' },
        {
          field: 'status',
          title: '状态',
          width: 200,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: false
        },
        {
          field: 'patchStatus',
          title: '补丁包状态',
          width: 200,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: false
        },
        {
          field: 'ip',
          title: 'ip',
          width: 120,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'tomcatName',
          title: 'tomcat名称',
          width: 220,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'tomcatPatch',
          title: 'tomcat路径',
          width: 500,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'tomcatPort',
          title: 'tomcat端口',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'projectName',
          title: '项目名称',
          width: 130,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'userName',
          title: '用户名',
          width: 130,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true
        },
        {
          field: 'passWord',
          title: '密码',
          width: 130,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: true,
          isResize: true,
          formatter: function (rowData, rowIndex, pagingIndex, field) {
            return '***'
          }
        },
        {
          field: 'startDate',
          title: '启动时间',
          width: 130,
          titleAlign: 'center',
          columnAlign: 'center',
          isEdit: false,
          isResize: true
        }
      ]
    }
  },
  methods: {
    // 单元格编辑回调
    cellEditDone (newValue, oldValue, rowIndex, rowData, field) {
      this.tableData[rowIndex][field] = newValue
      // 接下来处理你的业务逻辑，服务器持久化等...
    },
    doDelete () {
      // 参数根据业务场景随意构造
      // this.selectDatas
      // let params = {type:'delete',index:this.index};
      // this.$emit('on-custom-comp',params);
    },
    updatePatch () {
      this.btnLodading = true
      if (this.selectDatas.length > 0) {
        deployWindows.updatePatch(this.selectDatas).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要更新的服务器'
        })
      }
    },
    queryStatus () {
      this.btnLodading = true
      if (this.selectDatas.length > 0) {
        deployWindows.queryStatus(this.selectDatas).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要查询的'
        })
      }
    },
    executeKill () {
      this.btnLodading = true
      if (this.selectDatas.length > 0) {
        deployWindows.executeKill(this.selectDatas).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要查询的'
        })
      }
    },
    doStart () {
      this.btnLodading = true
      if (this.selectDatas.length > 0) {
        deployWindows.doStart(this.selectDatas).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要启动的服务器'
        })
      }
    },
    doStop () {
      this.btnLodading = true
      if (this.selectDatas.length > 0) {
        deployWindows.doStop(this.selectDatas).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要停止的服务器'
        })
      }
    },
    doSave () {
      if (this.tableData.length > 0) {
        console.info(this.tableData)
        this.btnLodading = true
        this.tableLoading = true
        deployWindows.saveDeployWindowsList(
          this.tableData
        ).then(src => {
          this.btnLodading = false
          this.search()
        })
      } else {
        this.$Notice.error({
          titile: '提示',
          desc: '请选择要保存的服务器'
        })
      }
    },
    doAdd () {
      this.tableData.push({ name: '', tomcatName: '', tomcatPatch: '', projectName: '' })
    },
    uploadSuccess (response, file, fileList) {
      this.getFiles()
    },
    selectALL (selection) {
      this.selectDatas = this.tableData
    },
    selectChange (selection, rowData) {
      this.selectDatas = selection
    },
    search () {
      this.tableLoading = true
      deployWindows.getDeployWindowsList().then(res => {
        this.tableLoading = false
        this.tableData = res.data.result
      }).catch(err => {
        this.tableLoading = false
        console.log(err)
      })
    },
    getFiles () {
      this.fileLoading = true
      deployWindows.getFiles().then(res => {
        this.fileLoading = false
        this.files = res.data.result
      }).catch(err => {
        this.fileLoading = false
        console.log(err)
      })
    },
    deleteFile (event, name) {
      this.fileLoading = true
      deployWindows.deleteFile(name).then(res => {
        this.getFiles()
        this.fileLoading = false
      }).catch(err => {
        this.fileLoading = false
        console.log(err)
      })
    },
    init () {
      this.search()
      this.getFiles()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less">
  .count-style {
    font-size: 50px
  }
  .rowButton {
    margin-bottom: 1rem;
  }
</style>
